<template name="sendcar">
	<!-- 出库领用记录 -->
	<view class="mypage">
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="请输工具名称" v-model="keyword" />
				<input type="text" placeholder="请输工具规格" v-model="keyword2" />
			</view>
			<view class="action">
				<button class="cu-btn bg-blue shadow-blur round" @tap="handelSearch">搜索</button>
			</view>
		</view>

		<view class="card-list-wrapper">
			<view class="card-list-row radius shadow-warp bg-white margin-top" v-for="(item,index) in orderList" :key="index"
			 @click="openDetail(item)">
				<view class="flex-just-between bottom-border top-wrap">
					<text class="text-blue text-bold">单号：{{ item.BILLNO }}</text>
					<view class="cu-capsule radius">
						<view class="cu-tag bg-blue sm">
							<text class="cuIcon-medal"></text>
						</view>
						<view class="cu-tag line-brown sm">{{ index+1}}</view>
					</view>
				</view>

				<!-- <view class="card-list-row-1">
					<text class="cuIcon-title text-red"></text>
					<text class="card-label text-black">出库单号：</text>
					<text>{{ item.FRBILLNO || '' }}</text>
				</view> -->

				<view class="card-list-row-1">
					<text class="cuIcon-title text-red"></text>
					<text class="card-label text-black">状态：</text>
					<text :class="item.BILLSTATUS==2?'text-green':'text-red' ">
						{{ orderStatus[item.BILLSTATUS] }}
					</text>
				</view>
				<view class="card-list-row-1">
					<text class="cuIcon-title text-red"></text>
					<text class="card-label text-black">领用人：</text>
					<text>{{ item.APPLYER || '' }}</text>
				</view>
				<view class="card-list-row-1">
					<text class="cuIcon-title text-red"></text>
					<text class="card-label text-black">领用时间：</text>
					<text>{{ item.APPLYERDATE || '' }}</text>
				</view>
				<view class="card-list-row-1">
					<text class="cuIcon-title text-orange"></text>
					<text class="card-label text-black">归还人：</text>
					<text>{{ item.BACKBY || '' }}</text>
				</view>
				<view class="card-list-row-1">
					<text class="cuIcon-title text-green"></text>
					<text class="card-label text-black">归还时间：</text>
					<text>{{ item.BACKDATE || '' }}</text>
				</view>
				<view class="card-list-row-1">
					<text class="cuIcon-title text-blue"></text>
					<text class="card-label text-black">备注：</text>
					<text>{{ item.VMEMO || '' }}</text>
				</view>
			</view>
		</view>
		<!-- <view v-else class="nodata">
			暂无数据
    </view>-->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import api from "@/common/api.js";
	import utils from "@/common/util.js";
	let _self,
		page = 1,
		total = 1,
		pageTitle,
		type,
		ajaxurl;
	let query = {
		category: "",
		page: 1,
		rows: 5,
		sidx: "",
		sord: "desc",
		queryJson: {},
		userId: "",
		account: ""
	};
	let queryJson = {};
	export default {
		computed: mapState(["userInfo", "baseUrl"]),
		data() {
			return {
				title: "列表",
				orderList: [],
				label01: "订单",
				keyword: "",
				keyword2:"",
				orderStatus: {
					0: "借出",
					1: "归还中",
					2: '已还完',
				}
			};
		},
		onLoad(params) {
			_self = this;
			_self.title = params.n;
			pageTitle = "出库领用记录";
			// type = params.mt
			page = 1;
			total = 1;
			query.userId = _self.userInfo.UserId;
			query.account = _self.userInfo.Account;
			query.category = params.sqlTbName;
			// queryJson.BILLSTATUS = 0;
			// console.log(params)
			this.getNewsList();
		},

		onShow() {
			uni.$once("refresh", data => {
				console.log('执行列表刷新');
				if (data.isRefresh) {
					page = 1;
					total = 1;
					this.orderList = []
					setTimeout( ()=>{
						this.getNewsList();
					}, 500)
				}
			});
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			page = 1;
			total = 1;
			this.getNewsList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			uni.showToast({
				title: "数据已刷新",
				icon: "none"
			});
		},
		// 加载更多
		onReachBottom: function() {
			this.getNewsList();
		},
		methods: {
			handelSearch() {
				console.log(_self.keyword);
				queryJson.MATERIALNAME = _self.keyword
				queryJson.MATSPEC = _self.keyword2
				// queryJson.FRBILLNO = _self.keyword;
				page = 1;
				total = 1;
				this.orderList = [];
				this.getNewsList();
			},
			getNewsList() {
				if (page > total) {
					return uni.showToast({
						icon: "none",
						title: "没有数据了。"
					});
				}
				query.page = page;
				query.queryJson = JSON.stringify(queryJson);
				let URL =  '/api/APPCommon/GetListPage_TC_TOOLRECORD_DTL' // api.apiPublic.queryOutboundRecord;
				// let URL = ''
				console.log(query);
				// console.log(URL);
				this.axios({
						url: URL,
						data: query,
						isLoading: true
					})
					.then(res => {
						let { Result, Message } = res ;
						if (page == 1) {
							_self.orderList = Result.rows;
							if (Result.rows.length == 0) {
								utils.tips("暂无数据！");
							}
							utils.setPageTitle(pageTitle + "列表(" + Result.records + ")");
						} else {
							_self.orderList = _self.orderList.concat(Result.rows);
						}
						total = Result.total;
						page++;
					})
				
			},
			openDetail: function(e) {
				if(e.BILLSTATUS == 2){
					return this.$utils.tips('已还完不可进行操作')
				}
				// console.log(e);
				// 借出
				uni.navigateTo({ // 借出
					url: '/pages/tab01/outbound/loaned_submit?data=' + encodeURIComponent(JSON.stringify(e))+'&t=1'
				})
			}
		}
	};
</script>

<style scoped>
	.nodata {
		width: 100vw;
		height: 100vh;
		text-align: center;
		line-height: 100vh;
		font-size: 32rpx;
		color: #959595;
	}

	.card-list-wrapper {
		width: 710upx;
		height: 100upx;
		margin: 0 auto;
	}

	.card-list-row {
		padding: 20upx;
	}

	.card-list-row-1 {
		padding: 10upx 0;
	}

	.card-label {
		display: inline-block;
		width: 150upx;
	}

	.top-border {
		border-top: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.top-wrap {
		padding-bottom: 20upx;
		margin-bottom: 20upx;
	}

	.bottom-border {
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.btn-wrap {
		padding-top: 20upx;
	}
</style>
